<template>
  <layout title="slider滑动条">
    <layout-content title="基础使用">
      <view class="tn-flex-start">
        <view class="tn-flex-1">
          <tn-slider v-model="sliderValue"></tn-slider>
        </view>
        <view class="slider-value">{{ sliderValue }}</view>
      </view>
      <view class="tn-margin-top-xl">
        <view class="tn-flex-start">
          <view class="tn-flex-1">
            <tn-slider v-model="minSliderValue" min="20" max="80"></tn-slider>
          </view>
          <view class="slider-value">{{ minSliderValue }}</view>
        </view>
      </view>
      <view class="tn-margin-top-xl">
        <view class="tn-flex-start">
          <view class="tn-flex-1">
            <tn-slider v-model="stepSliderValue" :step="10"></tn-slider>
          </view>
          <view class="slider-value">{{ stepSliderValue }}</view>
        </view>
      </view>
      <view class="tn-margin-top-xl">
        <view class="tn-flex-start">
          <view class="tn-flex-1">
            <tn-slider v-model="rangeSliderValue"></tn-slider>
          </view>
          <view class="slider-value tn-col-3 tn-text-center">{{ rangeSliderValue }}</view>
        </view>
      </view>
    </layout-content>

    <layout-content title="修改尺寸">
      <view class="tn-flex-start">
        <view class="tn-flex-1">
          <tn-slider v-model="sliderValue" height="10" bar-size="40"></tn-slider>
        </view>
        <view class="slider-value">{{ sliderValue }}</view>
      </view>
    </layout-content>

    <layout-content title="设置颜色">
      <view class="tn-flex-start">
        <view class="tn-flex-1">
          <tn-slider v-model="sliderValue" active-color="tn-bg-green" inactive-color="tn-bg-red--light"></tn-slider>
        </view>
        <view class="slider-value">{{ sliderValue }}</view>
      </view>
    </layout-content>

    <layout-content title="禁止滑动">
      <view class="tn-flex-start">
        <view class="tn-flex-1">
          <tn-slider v-model="sliderValue" disabled></tn-slider>
        </view>
        <view class="slider-value">{{ sliderValue }}</view>
      </view>
    </layout-content>
  </layout>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { CSSProperties, ref } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import TnSlider from '@/tuniao-ui/components/tn-slider/src/Slider.vue'

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}

// slider的值
let sliderValue = ref<number>(0)
let minSliderValue = ref<number>(0)
let stepSliderValue = ref<number>(0)
let rangeSliderValue = ref<number[]>([20, 80])
</script>

<style lang="scss" scoped>
.slider-value {
  transform: translateY(-50%);
}
</style>
